@import "~assets/styles/_bootstrap";

.invoice-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(246, 246, 249, 1);
	z-index: 100;

	.header {
		position: relative;
		height: rem(60px);
		line-height: rem(60px);
		text-align: center;
		font-size: rem(20px);
    border-bottom: 1px solid #eae9e9;
    background: #fff;
    color: #333;
	}

	.main {
		padding-top: rem(10px);

		.rise-wrapper {
			background: #fff;
			padding: rem(10px);
			border-top: 1px solid #eae9e9;
			border-bottom: 1px solid #eae9e9;
	    margin-bottom: rem(10px);

			> p {
				font-size: rem(16px);
		    line-height: rem(40px);
		    color: #333;
			}

			.rise-box {
				border-bottom: 1px solid #eae9e9;

				> input {
					width: 100%;
					height: rem(30px);
					font-size: rem(14px);
					border: none;
				}
			}
		}

		.content-wrapper {
			background: #fff;
			padding: 0 rem(10px);
			border-top: 1px solid #eae9e9;
			border-bottom: 1px solid #eae9e9;
	    margin-bottom: rem(10px);

	    > p {
	    	padding-top: rem(10px);
				font-size: rem(16px);
		    line-height: rem(40px);
		    color: #333;
			}

			.content-list {

				> li {
					position: relative;
					line-height: rem(50px);
					height: rem(50px);
					border-top: 1px solid #eae9e9;
					cursor: pointer;
					&.on {
						color: #EC5151;

						> i {
							display: block;
						}
					}

					> i {
						display: none;
						position: absolute;
				    top: 50%;
				    right: rem(20px);
				    width: rem(10px);
				    height: rem(20px);
				    margin-top: rem(-16px);
				    border-bottom: 1px solid #EC5151;
				    border-right: 1px solid #EC5151;
				    transform: rotate(45deg);
					}
				}
			}
		}

		.btn-wrapper {
			padding: 0 rem(10px);

			> a {
				display: block;
				width: 100%;
				height: rem(40px);
				line-height: rem(40px);
				border-radius: rem(3px);
				color: #fff;
				text-align: center;
				background: #EC5151;
				font-size: rem(16px);
			}
		}
	}
}